<template>
  <div @click="handleClick">
    <mu-list-item avatar :ripple="false" button>
      <mu-list-item-action>
        <ItemImg :src="data.img" />
      </mu-list-item-action>
      <mu-list-item-content>
        <mu-list-item-title>{{ data.name }}</mu-list-item-title>
        <mu-list-item-sub-title>
          {{ `${data.sex}  ${data.age}岁` }}
        </mu-list-item-sub-title>
        <mu-list-item-sub-title>
          <ScoreRate :rate="data.rate.value" />
        </mu-list-item-sub-title>
        <mu-list-item-sub-title>
          {{ data.count.label }}：{{ data.count.value }}
        </mu-list-item-sub-title>
      </mu-list-item-content>
      <mu-list-item-action v-if="showAddBtn">
        <mu-button
          class="add-icon-btn"
          icon
          @click.stop="addToShoppingList(data)"
        >
          <mu-icon class="add-icon" value="add"></mu-icon>
        </mu-button>
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import ItemImg from "@/components/ItemImg/index.vue";
import ScoreRate from "@/components/ScoreRate";
export default {
  name: "StaffItem",
  components: {
    ScoreRate,
    ItemImg,
  },
  props: {
    data: Object,
    showAddBtn: {
      type: Boolean,
      value: true,
    },
  },
  methods: {
    ...mapMutations(["add"]),
    addToShoppingList(data) {
      this.add(data);
    },
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped>
.add-icon-btn {
  width: 16px;
  height: 16px;
  background: #52a5f8;
}
.add-icon {
  color: white;
  font-size: 20px;
}
.add-icon {
  color: white;
  font-size: 20px;
}
</style>
